<template>
	<view class="successful_con">
		<view class="top">
			<view class="info_des">
				<view class="img"></view>
				<view class="right">
					<view class="up">
						<view class="lt">
							<view>张某某 33岁 女</view>
							<view>开发医师：王医师</view>
						</view>
					</view>
					<view class="date">上传时间：2025-08-12 20::55</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="title">处方单</view>
			<view class="cfh_list">
				<view>处方号  898992382232</view>
				<view>2025-08-12</view>
			</view>
			<view class="userInfo">
				<view class="up">
					<span>姓名 患者姓名</span>
					<span class="sex">性别 女</span>
					<span class="age">年龄 20岁</span>
				</view>
				<view class="down">诊断  癖习病,脾虚证</view>
			</view>
			<view class="medInfo">
				<view class="title">R:</view>
				<view class="list">
					<span v-for="(val,index) in 9" :key="index">醉柴胡9g</span>
				</view>
				<view class="des"><span>用法用量</span> 实际用药方式以包装袋彩色标签为准</view>
				<view class="des"><span>审方药师</span>韩东博&nbsp;&nbsp;<span>开方医师</span> 周学梅</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">订单明细</view>
			<view class="number">
				<view>订单编号</view>
				<view>wechat20230526212106960210</view>
			</view>
			<view class="payTime">
				<view>支付时间</view>
				<view>2023-05-26 21:21:14</view>
			</view>
			<view class="payMoney">
				<view>实付</view>
				<view>￥386.00</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.successful_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		padding: 19rpx 30rpx;
		font-family: PingFang SC, PingFang SC;
		.top{
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 27rpx 28rpx;
			.info_des{
				display: flex;
				align-items: center;
				.img{
					width:168rpx;
					height:169rpx;
					margin-right: 21rpx;
					border-radius: 10rpx;
					border:1rpx solid #ddd;
				}
				.right{
					flex: 1;
					.up{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.lt{
							view{
								font-weight: 400;
								font-size: 32rpx;
								color: #000000;
								margin-bottom: 20rpx;
							}
						}
					}
					.date{
						font-weight: 400;
						font-size: 32rpx;
						color: #000000;
					}
				}
			}
		}
		.center{
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 27rpx 28rpx;
			.title{
				width:100%;
				text-align: center;
				margin-bottom: 22rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
			.cfh_list{
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #E4E4E4;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
			.userInfo{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E4E4E4;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				.up{
					display: flex;
					margin-bottom: 10rpx;
					span{
						flex: 1;
					}
					.sex{
						text-align: center;
					}
					.age{
						text-align: center;
					}
				}
			}
			.medInfo{
				padding-top: 20rpx;
				.title{
					width:100%;
					text-align: left;
					font-weight: 500;
					font-size: 34rpx;
					color: #000000;
					margin-bottom: 20rpx;
				}
				.list{
					display: flex;
					gap: 20rpx;
					flex-wrap: wrap; /* 允许项目换行 */
					justify-content: space-between; /* 两端对齐 */
					margin-bottom: 20rpx;
					span{
						display: inline-block;
						// width:32%;
					}
				}
				.des{
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 20rpx;
					span{
						color:#666;
						margin-right: 10rpx;
					}
				}
			}
		}
		.bottom{
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 27rpx 28rpx;
			.title{
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				margin-bottom: 12rpx;
			}
			.number{
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.payTime{
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #E4E4E4;
			}
			.payMoney{
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>